<template>
  <SearchIng />
  <div class="search_box" @scrollTop="fada1">
    <div class="w">
      <div class="search_box_top">
        <a-tabs v-model:activeKey="activeKey">
          <a-tab-pane :key="item.id" v-for="item in activeLiss">
            <template #tab>
              <span @click="activeClick(item)" class="dev">
                {{ item.name }}
                <span v-if="item.name == '品牌'" class="Beta">Beta</span>
              </span>
            </template>
          </a-tab-pane>
        </a-tabs>

        <Signals ref="childeRef1" v-if="activeKey == '1'" />
        <Provider ref="childeRef2" v-if="activeKey == '2'" />
        <Purchases ref="childeRef3" v-if="activeKey == '3'" />
        <Branding ref="childeRef4" v-if="activeKey == '4'" />
        <Projections ref="childeRef5" v-if="activeKey == '5'" />
        <Proposed ref="childeRef6" v-if="activeKey == '6'" />
        <BiddingAgent ref="childeRef7" v-if="activeKey == '7'" />
        <Operation ref="childeRef8" v-if="activeKey == '8'" />
      </div>
      <!-- <Demonstrate :clickSon="clickSon" :childeRef="childeRef" /> -->
      <div class="demon" v-if="store.count.length > 0">
        <div>已选条件:</div>
        <div class="demon_two">
          <div class="demon_cox" v-for="item in store.count" :key="item">
            {{ item.name }}
            <span style="margin-right: 15px" v-for="ele in item.value" :key="ele">
              <span v-if="item.name == '地区：'" v-for="lll in ele.name" :key="lll" style="margin-right: 3px">
                <span v-for="aa in lll" :key="aa">{{ aa }}</span></span>
              <span v-else-if="item.name == '公告类型：'" v-for="ll in ele.name" :key="ll" style="margin-right: 3px">{{
          ll
        }}</span>
              <span v-else>{{ ele.name }}</span>
            </span>
            <div class="demon_icp" @click="demiconClick(item)">
              <el-icon>
                <Close />
              </el-icon>
            </div>
          </div>
        </div>
        <div class="demon_three" @click="removals">
          <span class="demon_three-span">清空</span>
          <el-icon :size="14">
            <Delete />
          </el-icon>
        </div>
      </div>
      <!-- 全部标讯 -->
      <TenderContent v-if="activeKey == '1'" />
      <!-- 供应商 -->
      <VendorData v-if="activeKey == '2'" />
      <!-- 采购商 -->
      <Purcdata v-if="activeKey == '3'" />
      <!-- 品牌 -->
      <Brandingdata v-if="activeKey == '4'" />
      <!-- 招标预测 -->
      <Projdata :scrollTos="scrollTos" v-if="activeKey == '5'" />
      <!-- 项目专区 -->
      <Proposedata v-if="activeKey == '6'" />
      <!-- 招标代理机构 -->
      <Biddingdata v-if="activeKey == '7'" />
      <!-- 公司 -->
      <Opedata v-if="activeKey == '8'" />

      <!--  -->
      <Searchbuttom />
      <Vip />
    </div>
    <DeriveLiss />
  </div>
  <Fotter />
</template>

<script setup>
import SearchIng from "@/components/searchs/index.vue";
import Searchbuttom from "@/components/searchbuttom/index.vue";
import Signals from "./computer/signals/index.vue";
import Provider from "./computer/provider/index.vue";
import Purchases from "./computer/purchases/index.vue";
import Branding from "./computer/branding/index.vue";
import Projections from "./computer/projections/index.vue";
import Proposed from "./computer/proposed/index.vue";
import BiddingAgent from "./computer/biddingAgent/index.vue";
import Operation from "./computer/operation/index.vue";
// import Demonstrate from "./computer/demonstrate/index.vue"; //已筛选的条件
import DeriveLiss from "./computer/deriveLiss/index.vue"; //弹框
import TenderContent from "./computer/tenderContent/index.vue";
import VendorData from "./computer/vendorData/index.vue";
import Purcdata from "./computer/purcdata/index.vue";
import Brandingdata from "./computer/brandingdata/index.vue";
import Projdata from "./computer/projdata/index.vue";
import Proposedata from "./computer/proposedata/index.vue";
import Biddingdata from "./computer/biddingdata/index.vue";
import Opedata from "./computer/opedata/index.vue";

import Fotter from "@/components/fotter/index.vue";
import Vip from "@/components/vip/index.vue";
import { Delete, Close } from "@element-plus/icons-vue";
import { onMounted, ref, reactive } from "vue";
import { useRadio1Store, useSearchStore } from "@/pain/search/search";
import { useRouter } from "vue-router";
import { decrypt } from "@/utils/index";
const route = useRouter();
const signalsRadio1 = useRadio1Store();
const store = useSearchStore();
let activeKey = ref("1");
let activeLiss = [
  {
    id: "1",
    name: "全部标讯",
  },
  {
    id: "2",
    name: "供应商",
  },
  {
    id: "3",
    name: "采购商",
  },
  {
    id: "4",
    name: "品牌",
  },
  {
    id: "5",
    name: "招标预测",
  },
  {
    id: "6",
    name: "项目专区",
  },
  {
    id: "7",
    name: "招标代理机构",
  },
  {
    id: "8",
    name: "公司",
  },
];

const token = localStorage.getItem("token");
const to = reactive({});
if (token) {
  to.value = JSON.parse(decrypt(token));
}

const activeClick = (id) => {
  console.log(signalsRadio1.id);
  console.log(id.id);
  activeKey.value = id.id;
  signalsRadio1.id = id.id;
  console.log(signalsRadio1.id);
  signalsRadio1.title.title = "";
  if (id.id == "1") {
  } else if (id.id == "2") {
    signalsRadio1.getsuppliers();
  } else if (id.id == "3") {
    signalsRadio1.getbuyers();
  } else if (id.id == "4") {
    signalsRadio1.getbrands();
  } else if (id.id == "5") {
    signalsRadio1.getforecasts();
  } else if (id.id == "6") {
    signalsRadio1.getprojects();
  } else if (id.id == "7") {
    signalsRadio1.getenderings();
  } else if (id.id == "8") {
    signalsRadio1.getcompanys();
  }
  // console.log(route.currentRoute.value.query.sear)
  if (route.currentRoute.value.query.sear == "10") {
    route.push({
      name: "search",
      path: "/search",
    });
  }
};
const childeRef1 = ref();
const childeRef2 = ref();
const childeRef3 = ref();
const childeRef4 = ref();
const childeRef5 = ref();
const childeRef6 = ref();
const childeRef7 = ref();
const childeRef8 = ref();
// 清除
const removals = () => {
  route.go(0)
  store.count = [];
  if (activeKey.value == "1") {
    childeRef1.value.biaoxun();
  } else if (activeKey.value == "2") {
    childeRef2.value.gongyingshang();
  } else if (activeKey.value == "3") {
    childeRef3.value.caigoushang();
  } else if (activeKey.value == "4") {
    childeRef4.value.pinpai();
  } else if (activeKey.value == "5") {
    childeRef5.value.zhaobiaoyuce();
  } else if (activeKey.value == "6") {
    childeRef6.value.nijianxiangmu();
  } else if (activeKey.value == "7") {
    childeRef7.value.zhaobiaodailijigou();
  } else if (activeKey.value == "8") {
    childeRef8.value.gongsi();
  }
};
signalsRadio1.title.title = route.currentRoute.value.params.id;
signalsRadio1.routerPush = route.currentRoute.value.name;

activeKey.value = route.currentRoute.value.query.id || "1";
console.log(signalsRadio1);
onMounted(() => {
});







// 单个清空
const demiconClick = (data) => {
  store.count = store.count.filter((word) => word.name != data.name);
  if (activeKey.value == "1") {
    console.log(signalsRadio1.count);
    if (data.name == "公告类型：") {
      signalsRadio1.count.bulletin = [];
      childeRef1.value.reClick1();
    } else if (data.name == "招标公司类型：") {
      signalsRadio1.count.Boos = [];
      childeRef1.value.reClick3();
    } else if (data.name == "招标状态") {
      signalsRadio1.count.affairs = "";
      childeRef1.value.radio1.affairs = "";
      childeRef1.value.drop4 = [];
    } else if (data.name == "投标资质过滤：") {
      signalsRadio1.count.checkedCities = [];
      childeRef1.value.checkClock();
    } else if (data.name == "地区：") {
      signalsRadio1.count.leave = [];
      signalsRadio1.count.market = [];
      signalsRadio1.count.quarter = [];
      childeRef1.value.checkClock6();
    } else if (data.name == "时间：") {
      childeRef1.value.reClick7();
      childeRef1.value.drop8 = [];
      signalsRadio1.count.times = [
        {
          oneTime: "",
          twoTime: "",
        },
      ];
    } else if (data.name == "联系方式") {
      childeRef1.value.radio1.contact = "";
      signalsRadio1.count.contact = "";
      childeRef1.value.drop8 = [];
    } else if (data.name == "金额：") {
      childeRef1.value.moneyClick();
      childeRef1.value.radio1.money = "";
      signalsRadio1.count.money = "";
      signalsRadio1.count.max = "";
      signalsRadio1.count.min = "";
    } else if (data.name == "采购类别：") {
      childeRef1.value.reClick10();
      signalsRadio1.count.projects = [];
    } else if (data.name == "附件：") {
      childeRef1.value.radio1.annexes = "";
      signalsRadio1.count.annexes = "";
      childeRef1.value.drop16 = [];
    } else if (data.name == "搜索范围：") {
      signalsRadio1.count.checkList = [];
      childeRef1.value.reClick12();
    } else if (data.name == "匹配模式：") {
      childeRef1.value.drop13 = [];
      childeRef1.value.radio1.matching = "";
      signalsRadio1.count.matching = "";
    } else if (data.name == "同时包含关键词：") {
      signalsRadio1.count.keywords = "";
      childeRef1.value.embodyClick();
    } else if (data.name == "同时包含关键词范围：") {
      signalsRadio1.count.keyList = [];
      childeRef1.value.embodyClick();
    } else if (data.name == "同时包含排除词:") {
      signalsRadio1.count.excluded = "";
      childeRef1.value.removeClick();
    } else if (data.name == "同时包含排除词范围:") {
      signalsRadio1.count.excludedList = [];
      childeRef1.value.embodyClick();
    }
    signalsRadio1.getsearchs();
  }

  if (activeKey.value == "2") {
    if (data.name == "地区：") {
      signalsRadio1.suppliers.leave = [];
      signalsRadio1.suppliers.market = [];
      signalsRadio1.suppliers.quarter = [];
      childeRef2.value.checkClock6();
    } else if (data.name == "时间：") {
      childeRef2.value.reClick7();
      signalsRadio1.suppliers.times = [
        {
          oneTime: "",
          twoTime: "",
        },
      ];
    } else if (data.name == "招标公司类型：") {
      signalsRadio1.suppliers.Boos = [];
      childeRef2.value.reClick3();
    } else if (data.name == "搜索范围：") {
      signalsRadio1.suppliers.checkList = "";
      childeRef2.value.radio1.checkList = "";
    }
    signalsRadio1.getsuppliers();
  }

  if (activeKey.value == "3") {
    if (data.name == "地区：") {
      signalsRadio1.buyer.leave = [];
      signalsRadio1.buyer.market = [];
      signalsRadio1.buyer.quarter = [];
      childeRef3.value.reClick7();
    } else if (data.name == "时间：") {
      childeRef3.value.checkClock6();
      signalsRadio1.buyer.times = [
        {
          oneTime: "",
          twoTime: "",
        },
      ];
    } else if (data.name == "采购公司类型：") {
      signalsRadio1.buyer.Boos = [];
      childeRef3.value.reClick3();
    } else if (data.name == "搜索范围：") {
      signalsRadio1.buyer.checkList = "";
      childeRef3.value.radio1.checkList = "";
    }
    signalsRadio1.getbuyers();
  }

  if (activeKey.value == "4") {
    if (data.name == "地区：") {
      signalsRadio1.brands.leave = [];
      signalsRadio1.brands.market = [];
      signalsRadio1.brands.quarter = [];
      childeRef4.value.reClick7();
    } else if (data.name == "时间：") {
      signalsRadio1.brands.times = [
        {
          oneTime: "",
          twoTime: "",
        },
      ];
      childeRef4.value.checkClock6();
    }
    signalsRadio1.getbrands();
  }

  if (activeKey.value == "5") {
    if (data.name == "地区：") {
      childeRef5.value.reClick7();
      signalsRadio1.forecasts.leave = [];
      signalsRadio1.forecasts.market = [];
      signalsRadio1.forecasts.quarter = [];
    } else if (data.name == "时间：") {
      childeRef5.value.checkClock6();
      signalsRadio1.forecasts.times = [
        {
          oneTime: "",
          twoTime: "",
        },
      ];
    }
    signalsRadio1.getforecasts();
  }
  if (activeKey.value == "6") {
    if (data.name == "地区：") {
      childeRef6.value.reClick7();
      signalsRadio1.proposed.leave = [];
      signalsRadio1.proposed.market = [];
      signalsRadio1.proposed.quarter = [];
    } else if (data.name == "时间：") {
      childeRef6.value.checkClock6();
      signalsRadio1.proposed.times = [
        {
          oneTime: "",
          twoTime: "",
        },
      ];
    } else if (data.name == "审批状态") {
      signalsRadio1.proposed.approval = "";
      childeRef6.value.radio1.approval = "";
    } else if (data.name == "搜索范围：") {
      signalsRadio1.proposed.checkList = [];
      childeRef6.value.reClick12();
    }
    signalsRadio1.getprojects();
  }
  if (activeKey.value == "7") {
    if (data.name == "地区：") {
      childeRef7.value.reClick7();
      signalsRadio1.agency.leave = [];
      signalsRadio1.agency.market = [];
      signalsRadio1.agency.quarter = [];
    } else if (data.name == "时间：") {
      childeRef7.value.checkClock6();
      signalsRadio1.agency.times = [
        {
          oneTime: "",
          twoTime: "",
        },
      ];
    } else if (data.name == "排序方式：") {
      signalsRadio1.agency.sorting = "";
    }
    signalsRadio1.getenderings();
  }

  if (activeKey.value == "8") {
    if (data.name == "地区：") {
      childeRef8.value.checkClock6();
      signalsRadio1.corporation.leave = [];
      signalsRadio1.corporation.market = [];
      signalsRadio1.corporation.quarter = [];
    } else if (data.name == "注册资本：") {
      childeRef8.value.moneyClick();
      childeRef8.value.radio1.money = "";
      signalsRadio1.corporation.money = "";
      signalsRadio1.corporation.max = "";
      signalsRadio1.corporation.min = "";
    } else if (data.name == "企业规模：") {
      childeRef8.value.enterprisClick();
      childeRef8.value.radio1.enterpris = "";
      signalsRadio1.corporation.enterpris = "";
      signalsRadio1.corporation.enterprismax = "";
      signalsRadio1.corporation.enterprismin = "";
    } else if (data.name == "是否代理：") {
      signalsRadio1.corporation.agent = "";
      childeRef8.value.radio1.agent = "";
    } else if (data.name == "经营状态：") {
      signalsRadio1.corporation.operates = [];
      childeRef8.value.reClick10();
    } else if (data.name == "招标公司类型：") {
      signalsRadio1.corporation.Boos = [];
      childeRef8.value.reClick3();
    }
    signalsRadio1.getcompanys();
  }
};
</script>

<style lang="scss" scoped>
:deep() {
  .ant-tabs-tab {
    font-size: 16px !important;
    color: #a9b1be;
  }
}

// :deep(
//     :where(.css-dev-only-do-not-override-19yxfbp).ant-tabs
//       .ant-tabs-tab.ant-tabs-tab-active
//       .ant-tabs-tab-btn
//   ) {
//   color: #F43107;
// }

// :where(.css-dev-only-do-not-override-19yxfbp).ant-tabs .ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn
:deep() {
  .ant-tabs-tab-active .ant-tabs-tab-btn {
    color: #f43107 !important;
  }

  .ant-tabs .ant-tabs-ink-bar {
    background-color: #f43107;
  }
}

:deep(.ant-tabs-tab .ant-tabs-tab-active) {
  color: red;
}

:deep(.ant-tabs-tab .ant-tabs-tab-active) {
  color: red;
}

.w {
  width: 1200px;
  margin: 0 auto;
}

.search_box {
  width: 100%;
  // height: 830px;
  background-color: #f6f6f6;
  cursor: pointer;

  .search_box_top {
    margin-top: 20px;
    padding: 20px 0 10px 20px;
    background-color: #fff;

    .Beta {
      width: 30px;
      height: 14px;
      background: #fb4204;
      padding: 2px;
      border-radius: 3px;
      color: #f6f6f6;
    }
  }
}

.demon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px 15px 20px;

  .demon_two {
    flex: 1;
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .demon_cox {
      position: relative;
      margin: 3px 0 0 15px;
      padding: 5px 10px;
      // background-color: #e6e9ff;
      background: #fde8bf;
      border-radius: 50px;
      font-size: 14px;
      color: #f78c16;

      .demon_icp {
        position: absolute;
        top: 6.5px;
        right: 6.5px;
      }
    }
  }

  .demon_three {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 86px;
    height: 34px;
    background-color: #ffe2e2;
    color: #ff4848;
    border-radius: 50px;
    cursor: pointer;

    .demon_three-span {
      margin-right: 5px;
    }
  }
}

.ant-tabs-tab {
  cursor: pointer;
}
</style>
